<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100">
    <!-- 主要内容区域 -->
    <div class="relative px-4 pt-12 pb-20">
      <!-- 装饰性圆形背景 -->
      <div class="absolute inset-0 overflow-hidden">
        <div class="absolute top-10 left-10 w-32 h-32 bg-blue-200 rounded-full opacity-30"></div>
        <div class="absolute top-20 right-5 w-20 h-20 bg-blue-300 rounded-full opacity-40"></div>
        <div class="absolute bottom-40 left-5 w-16 h-16 bg-blue-200 rounded-full opacity-25"></div>
        <div class="absolute bottom-20 right-20 w-40 h-40 bg-blue-100 rounded-full opacity-20"></div>
      </div>

      <!-- 用户信息卡片 -->
      <div class="relative z-10 flex justify-center mb-16">
        <div class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-full p-8 text-white text-center min-w-[280px]">
          <!-- 用户头像 -->
          <div class="w-20 h-20 bg-white rounded-full mx-auto mb-4 flex items-center justify-center">
            <div v-if="userInfo.avatar" class="w-16 h-16 bg-gray-300 rounded-full flex items-center justify-center">
              <img :src="userInfo.avatar" alt="用户头像" class="w-16 h-16 rounded-full object-cover">
            </div>
            <div v-else class="w-16 h-16 bg-gray-300 rounded-full flex items-center justify-center">
              <svg class="w-8 h-8 text-gray-600" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
              </svg>
            </div>
          </div>

          <!-- 用户手机号 -->
          <div class="text-lg font-medium mb-2">
            {{ maskedPhone }}
          </div>

          <!-- 欢迎文字 -->
          <div class="text-sm opacity-90">
            欢迎您！
          </div>
        </div>
      </div>

      <!-- 功能菜单 -->
      <div class="relative z-10 grid grid-cols-3 gap-6 max-w-sm mx-auto mb-16">
        <!-- 结算记录 -->
        <NuxtLink to="/settlements" class="flex flex-col items-center p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow">
          <div class="w-12 h-12 mb-3 flex items-center justify-center">
            <svg class="w-8 h-8 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
          </div>
          <span class="text-sm text-gray-700">结算记录</span>
        </NuxtLink>

        <!-- 签约记录 -->
        <NuxtLink to="/contracts" class="flex flex-col items-center p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow">
          <div class="w-12 h-12 mb-3 flex items-center justify-center">
            <svg class="w-8 h-8 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
            </svg>
          </div>
          <span class="text-sm text-gray-700">签约记录</span>
        </NuxtLink>

        <!-- 关于我们 -->
        <NuxtLink to="/about" class="flex flex-col items-center p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow">
          <div class="w-12 h-12 mb-3 flex items-center justify-center">
            <svg class="w-8 h-8 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
            </svg>
          </div>
          <span class="text-sm text-gray-700">关于我们</span>
        </NuxtLink>
      </div>

      <!-- 底部标语 -->
      <div class="relative z-10 text-center">
        <div class="inline-flex items-center text-gray-500 text-sm">
          <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
          </svg>
          依法纳税是每个公民的义务
        </div>
      </div>
    </div>

    <!-- 底部导航指示器 -->
    <div class="fixed bottom-6 left-1/2 transform -translate-x-1/2 flex space-x-2">
      <div class="w-8 h-1 bg-white rounded-full"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 用户信息
const userInfo = ref({
  phone: '',
  avatar: '',
  name: ''
})

// 计算属性：脱敏手机号
const maskedPhone = computed(() => {
  if (!userInfo.value.phone) return ''
  const phone = userInfo.value.phone
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
})

// 返回上一页
const goBack = () => {
  window.history.back()
}

// 页面加载时获取用户信息
onMounted(() => {
  const storedUserInfo = localStorage.getItem('userInfo')
  if (storedUserInfo) {
    userInfo.value = JSON.parse(storedUserInfo)
  } else {
    // 如果没有用户信息，跳转到登录页
    navigateTo('/login')
  }
})
</script>